import { Button, Form, Input, Modal, Radio } from 'antd';
import React, { useState } from 'react';
import productcolors from "../model/productcolor/productcolors"
interface Values {
    partbname: string;
}

interface CollectionCreateFormProps {
    visible: boolean;
    onCreate: (values: Values) => void;
    onCancel: () => void;
}

const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
    visible,
    onCreate,
    onCancel,
}) => {
    const [form] = Form.useForm();
    return (
        <Modal
            visible={visible}
            title="新增产品"
            okText="新增"
            cancelText="取消"
            onCancel={onCancel}
            onOk={() => {
                form
                    .validateFields()
                    .then(values => {
                        form.resetFields();
                        onCreate(values);
                    })
                    .catch(info => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                form={form}
                layout="vertical"
                name="form_in_modal"
                initialValues={{ modifier: 'public' }}
            >
                <Form.Item
                    name="productcolor"
                    label="产品颜色"
                    rules={[{ required: true, message: '请输入品名!' }]}
                >
                    <Input />
                </Form.Item>
            </Form>
        </Modal>
    );
};

const App: React.FC = () => {
    const [visible, setVisible] = useState(false);

    const onCreate = async ({ productcolor, }: any) => {
        let { data } = await productcolors.add({ productcolor })
        console.log(data);
        setVisible(false);
    };

    return (
        <div>
            <Button
                type="primary"
                onClick={() => {
                    setVisible(true);
                }}
            >
                新增产品
            </Button>
            <CollectionCreateForm
                visible={visible}
                onCreate={onCreate}
                onCancel={() => {
                    setVisible(false);
                }}
            />
        </div>
    );
};

export default App;